<template>
    <div class="detail-wrapper">
        <v-container grid-list-md text-xs-center>
            <v-layout row wrap>
                <v-flex xs10 offset-xs1>
                    <article class="detail-content text-xs-center">
                        <header class="detail-title text-xs-center">
                            Detail {{$route.params.id}}
                        </header>
                        <router-link :to="{
                            name: 'detail',
                            params: {
                                id: Number($route.params.id) + 1
                            }
                        }">
                            Detail {{Number($route.params.id) + 1}}
                        </router-link>
                        <p>
                        Progressive Web Apps are user experiences that have the reach of the web, and are:
    Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
    Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
                        </p>
                    </article>
                </v-flex>
            </v-layout>
         </v-container>
    </div>
</template>

<script>
import {mapActions} from 'vuex';

export default {
    name: 'detail',
    methods: {
        ...mapActions('appShell/appHeader', [
            'setAppHeader'
        ]),
        ...mapActions('appShell/appBottomNavigator', [
            'hideBottomNav'
        ])
    },
    async asyncData() {
        await new Promise((resolve, reject) => {
            setTimeout(resolve, 500);
        });
    },
    created() {
        this.setAppHeader({
            show: true,
            title: 'Lavas',
            showMenu: false,
            showBack: true,
            showLogo: false,
            actions: [
                {
                    icon: 'home',
                    route: {
                        name: 'home'
                    }
                }
            ]
        });
        this.hideBottomNav();
    }
};
</script>

<style lang="stylus" scoped>

.detail-content
    font-size 16px
    line-height 30px
    margin-top 30px

    .detail-title
        margin-bottom 20px
        padding 10px 0
        font-size 36px
        font-weight bold

</style>
